<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
    <head>
        <title>manipulation of elements</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <script type="text/javascript" src="jquery-1.9.1.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                var offset = 100;

                function showResoluionInDiv() {
                    $("#resolution").html($(window).width() + " - " + $(window).height());
                }

                function resizeDiv() {
                    $("#wholePageDiv").fadeOut(500, function() {
                        $("#wholePageDiv").css("width", ($(window).width() - offset));
                        $("#wholePageDiv").css("height", ($(window).height() - offset));
                        $("#wholePageDiv").css("left", offset / 2);
                        $("#wholePageDiv").css("top", offset / 2);
                        $("#wholePageDiv").fadeIn(500);
                    })
                }

                showResoluionInDiv();

                resizeDiv();

                $(window).resize(function() {
                    resizeDiv();
                    showResoluionInDiv();
                })

            })
        </script>
    </head>
    <body style="margin: 0; padding: 0">

        <div id="wholePageDiv" style="width: 0px; height: 0px; position: absolute; text-align: center; position: relative; border-style: solid; border-color: black ; border-width: 2px; background-color: lightgreen">
            <h2 id="resolution" style="padding-bottom: 0px; margin-bottom: 0px; "></h2>
            <h3>
                <a href="index.html" style="">Index</a>
            </h3>
        </div>
    </body>
</html>
